\section{jQuery特效}

jQuery提供了一些为页面添加动画特效的方法，从常用的淡入淡出到复杂的动画，jQuery都可应对。

\subsection{显示隐藏}

hide()和show()方法能隐藏、显示选中的元素，相当与在这些元素的起始标签中加入了display样式。例如：

\begin{lstlisting}
 $("p:first").show();
\end{lstlisting}
没有参数的show()、hide()方法，会立即显示、隐藏选中的元素。hide()、show()方法的常用参数如下：

\begin{description}
	\item [duration] 一个字符串或者数字决定动画将运行多久。字符串有"slow"、"fast"，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”' 和 “slow” 分别代表200和600毫秒的延时。
	\item [easing] 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。
	\item [complete] 在动画完成时执行的函数，可选参数。
\end{description}
toggle()方法能自动识别状态，实现显示、隐藏效果的切换，其使用方法和show()、hide()方法类似。

\subsection{淡入淡出}
fadeIn()和fadeOut()、以及fadeTo()方法通过改变匹配元素的不透明度做动画效果，fadeTo()方法不会隐藏的元素并可以指定最后的透明度值。fadeToggle()方法能在淡入、淡出效果之间切换。

这几个方法的常用参数和show()方法类似：

\begin{description}
	\item [duration] 一个字符串或者数字决定动画将运行多久。字符串有"slow"、"fast"，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”' 和 “slow” 分别代表200和600毫秒的延时。
	\item [easing] 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。
	\item [complete] 在动画完成时执行的函数，可选参数。
\end{description}

例如下面的代码将使div在3000毫秒时长内淡入，并在动画结束后，使span元素在100毫秒淡入：

\begin{lstlisting}
$("div").fadeIn(3000, function() {
    $("span").fadeIn(100);
});
\end{lstlisting}

\subsection{上下滑动效果}

slideUp()、slideDown()和slideToggle()方法用来实现上下滑动效果，其用法和淡入淡出、显示隐藏的方法类似。

\subsection{自定义动画效果}

.animate()方法能根据一组css属性，执行自定义动画效果。这个方法的参数如下：

\begin{description}
	\item [properties] 一个CSS属性和值的对象,动画将根据这组对象移动。所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。。
	\item [duration] 一个字符串或者数字决定动画将运行多久。字符串有"slow"、"fast"，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”' 和 “slow” 分别代表200和600毫秒的延时。
	\item [easing] 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。
	\item [complete] 在动画完成时执行的函数，可选参数。
\end{description}
例如：
\begin{lstlisting}
.animate({
          width: '50%'
      }, 'slow')
      .animate({
          left: switcherWidth - paraWidth
      }, 'slow')
      .animate({
          height: '+=20px'
      }, 'slow')
      .animate({
          borderWidth: '5px'
      }, 'slow');
\end{lstlisting}

